<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换案例</title>
		<!-- 脚本 -->
		<script>
			// 定义一个方法，方法体中的代码不会立马运行
			// 方法在调用的时候才会运行方法体中的代码
			function showCat() {
				// 把图片改成猫
				document.getElementById('animal').src = 
				'img/cat.jpg'
			}
			function showDog() {
				// 把图片改成狗
				document.getElementById('animal').src =
				'img/dog.jpg'
			}
		</script>
	</head>
	<body>
		<button onclick="showCat()">显示猫</button>
		<button onclick="showDog()">显示狗</button>
		<br />
		<img id="animal" 
		style="width: 500px;" src="img/dog.jpg"/>
	</body>
	<script>
		// 直接执行代码
		/* JS获取当前页面中的某个元素 */
		// 文档对象：表示当前的HTML文档
		var animalImg = document.getElementById('animal')
		// 
		animalImg.src = 'img/cat.jpg'
	</script>
</html>